<template>
  <canvas id="ice-1_2" width="600" height="100"></canvas>
</template>

<script setup lang="ts">
import { onMounted } from 'vue'
import {createShader,createProgram} from "@/js/webglUtils";


onMounted(() => {
  const canvas = document.querySelector('#ice-1_2')
  const gl = canvas.getContext('webgl')

  const vertexCode = `
    void main () {
      gl_Position = vec4(0, 0.0, 0.0, 1.0);
      gl_PointSize = 10.0;
    }
  `
  const fragmentCode = `
    void main () {
      gl_FragColor = vec4(0.0, 0.0, 0.9, 1.0);
    }
  `
  const vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexCode)
  const fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentCode)
  createProgram(gl, vertexShader, fragmentShader)
  gl.drawArrays(gl.POINTS, 0, 1)
})
</script>

<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
  name: 'Second1_2'
})
</script>
